<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="widtd=device-widtd, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/shopCar.css">
    <link rel="stylesheet" href="图标图标/iconfont.css">

</head>
<body>
    <div id="tip">
		<div class="tip_center">
			<div class="tip_left">
				<p>晚上好，找到中意的书了吗?&nbsp;&nbsp;&nbsp;&nbsp;</p>
				<p>请登录&nbsp;&nbsp;</p>
				<p>免费注册</p>
			</div>
			<ul class="tip_right">
				<li class="list">我的学习</li>
				<li class="iconfont icon-wode">个人中心</li>
				<li>我的订单</li>
				<li>客户服务</li>
				<li>手机新华</li>
			</ul>
		</div>
	</div>
	<div id="layout">
		<div class="layout_center">
			<div class="center_top">
				<div class="center_top_left">
					<img src="img/01.jpg" alt="">
				</div>
				<div class="center_top_right">
					<div class="inpt">
						<input type="text" placeholder="论中国共产党历史">
						<button class="iconfont icon-fangdajing"></button>
						<p class="iconfont icon-gouwuche-xuanzhong">&nbsp;&nbsp;购物车&nbsp;&nbsp;<span>1</span>&nbsp;件&nbsp;<span class="iconfont icon-angle-right"></span></p>
					</div>
					<ul>
						<li>热门搜索</li>
						<li>习近平扶贫故事</li>
						<li>北京冬奥会</li>
						<li>日历2021</li>
						<li>诗词名句</li>
						<li>新华英雄笔</li>
					</ul>
				</div>
            </div>
            <div id="goods">
                <div class="div1">
                    全部商品
                </div>
                <div class="div2">
                    <span>配送至</span>
                    <select name="" id="province">
                    </select>
                    <select name="" id="city">
                    </select>
                    <select name="" id="area">
                    </select>
                   
                </div>
            </div>

            <div id="box">
                <table id="t" border="1"  cellspacing="0" cellpadding="0">
                    <tr class="tr1">
                        <td>
                            <input id="checkallid" type="checkbox" />全选
                        </td>
                        <td class="one">商品信息</td>
                        <td class="two">价格</td>
                        <td class="three">数量</td>
                        <td class="four">小计</td>
                        <td class="five">操作</td>
                    </tr>
                    <tr class="tr2" >
                        <td><input type="checkbox" id="trr"/></td>
                        <td>新华书店网上商城自营图书</td>
                        
                    </tr>
                   
                    <tr class="item">
                        <td colspan="7" style="height: 25px;" >
                           
                        </td>
                    </tr>

                    <tr class="tr1">
                        <td>
                            <input id="checkAll" type="checkbox" />全选
                        </td>
                        <td class="one">批量删除 移到我的收藏</td>
                        <td class="two"></td>
                        <td class="three">已选<span class="totalcount">1</span>件商品</td>
                        <td class="four">合计（不含运费）<span class="totalMoney">￥129.00</span></td>
                        <td class="five">去结算</td>
                    </tr>
                </table>
            </div>
            <script src="js/machine.js"></script>
            <script src="js/citys.js"></script>
            <script src="js/shopCar.js"></script>
            <script src="js/jquery-3.2.1.min.js"></script>
            <script src="./js/checkAll.js"></script>
            <!-- <script src="js/shopCar(1).js"></script> -->
            <script src="js/cookieTools.js"></script>
            
            <script>
                
                    console.log(getCookie('iphone'))
                    $.get("php_1/getShoppingCart.php",{"vipName":getCookie('iphone')},function(data){
                        
                       
                       let arr1=JSON.parse(data)
                        // console.log(arr1);
                        arr1.forEach(arr => {
                        // console.log(arr);

                            let htmlStr=`
                                 <tr class="tr3">
                                        <td><input type="checkbox" /></td>
                                        <td class="td1" >
                                            <div>
                                                <img src="${arr.goodsImg}" alt="">
                                                <span>${arr.goodsDesc}</span>
                                            </div>
                                        </td>


                                        <td class="price">${arr.goodsPrice}</td>
                                        <td class="td3">
                                            <button class="reduce">-</button>
                                            <input type="text" class="num" value="0">
                                            <button class="add">+</button>
                                        </td>
                                        <td class="smallTotal">0</td>
                                        <td>
                                            <span class="delete" >删除</span>
                                            <span>移动到收藏夹</span>
                                            <!-- <input type="button" value="删除" /> -->
                                        </td>
                                    </tr>

                            `
                            // console.log(htmlStr);
                           $(".item").before(htmlStr)
                        
                        });
                        $(function () {
                                // window.onload = function () {
                                    $("#checkallid").checkAllBind($("#t :checkbox"));
                                    $("#trr").checkAllBind($("#t :checkbox"));
                                    $("#checkAll").checkAllBind($("#t :checkbox"));
                                    totalMoney();
                                    // totalcount()

                                    $(".reduce").click(function () {
                                        // alert(1)
                                        changeNum(this, "-")
                                    });

                                    $(".add").click(function () {
                                        changeNum(this, "+")
                                    });

                                    $(".delete").click(function () {
                                        if (confirm("亲，您真的要删除吗？")) {
                                            this.parentNode.parentNode.remove();
                                            totalMoney();
                                            // totalcount()
                                        }
                                    });

                                    $("#t :checkbox:gt(0)").change(function(){
                                        totalMoney();
                                        // totalcount()
                                    });
                                    
                                    // $("#trr").change(totalMoney);

                                    $("#checkallid").change(totalMoney);

                                

                                // 修改数字
                                function changeNum(obj, operator) {
                                    // 1、获取原来的数字和价格
                                    let num = obj.parentNode.querySelector(".num").value;
                                    
                                    // console.log( obj.parentNode);
                                    
                                    // console.log(num);
                                    let price = obj.parentNode.parentNode.querySelector(".price").innerHTML;

                                    // 2、修改数量
                                    operator == "+" ? num++ : num--;
                                    num = num < 0 ? 0 : num;

                                    // 3、3、把结果显示在界面上
                                    // 1）、修改数量
                                    obj.parentNode.querySelector(".num").value = num;
                                    // 2）、修改小计
                                    obj.parentNode.parentNode.querySelector(".smallTotal").innerHTML = num * price;

                                    // 4、修改总计
                                    totalMoney();
                                    // totalcount()
                                }

                                function totalMoney() {        
                                    let smallTotals = $(".smallTotal");
                                    let num=$(".num")
                                    let money = 0;
                                    let count=0
                                    for (let i = 0; i < smallTotals.length; i++) {
                                        // 计算总和
                                        let $checkbox= smallTotals.eq(i).parent().find(":checkbox");
                                        
                                        // console.log($checkbox.prop("checked"));

                                        if($checkbox.prop("checked")){
                                            money += Number(smallTotals[i].innerHTML);
                                            count+=Number(num[i].value)
                                        }
                                    
                                    }

                                    $(".totalMoney").html(money);
                                    $(".totalcount").html(count);
                                }
                        })
                    })
                    
            </script>
            <script>
               

            </script>
            
</body>
</html>